<template>
  <div>
    <el-table
      :data="state.tableData"
      v-loading="state.loading"
      header-cell-class-name="eltablebg"
      style="width: 100%;margin-bottom:30px"
    >
      <el-table-column
        prop="created_at"
        :label="$t('assets.time')"
      ></el-table-column>
      <el-table-column
        prop="symbol_name"
        :label="$t('exchange.tradingPair')"
      ></el-table-column>
      <el-table-column prop="transaction_type" :label="$t('exchange.type')">
        <template #default="r">
          <span>{{
            r.row.type_name
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="transaction_direction"
        :label="$t('exchange.direction')"
      >
        <template #default="r">
          <span
           
            >
            <!-- :class="
              r.row.transaction_direction == 1 ? 'text-green' : 'text-red'
            " -->
            <!-- {{
              r.row.type == 1
                ? $t("exchange.buy")
                : $t("exchange.sell")
            }} -->
               {{
              r.row.type_name 
               
            }}
            
            </span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="transaction_unit_price"
        :label="$t('exchange.price')"
      >
        <template #default="r">{{
          $currency(r.row.number)
        }}</template>
      </el-table-column>
      <!-- <el-table-column
        prop="transaction_total_amount"
        :label="$t('assets.amount')"
      >
        <template #default="r">{{
          $currency(r.row.transaction_total_amount)
        }}</template>
      </el-table-column> -->
      <!-- <el-table-column
        prop="transaction_make_amount"
        :label="$t('exchange.dealDone')"
      >
        <template #default="r">
          <span>
            {{
              r.row.transaction_make_amount === 0
                ? "--"
                : $currency(r.row.transaction_make_amount)
            }}
          </span>
        </template></el-table-column
      >
      <el-table-column prop="" :label="$t('exchange.totalCommission')">
        <template #default="r">
          <span>
            {{
              $currency(
                accMulti(
                  r.row.transaction_unit_price,
                  r.row.transaction_total_amount
                )
              )
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="" :label="$t('assets.operate')">
        <template #default="r">
          <el-button type="text" @click="close(r.row.id)">{{
            $t("exchange.cancelOrder")
          }}</el-button>
        </template>
      </el-table-column> -->
      <template #empty>
        <Norecord />
      </template>
    </el-table>
    <Pagination
      :total="state.total"
      :current="state.currentPage"
      :size="state.list_param.limit"
      @currentchange="currentchange"
    />
    <!-- 撤销弹窗 -->
    <Messagebox
      :text="$t('deal.cancelorder')"
      @oncancer="state.dialog = false"
      :type="3"
      @onconfirm="confirm"
      :dialog="state.dialog"
    />
  </div>
</template>

<script>
import { watch } from "vue";
import { transactionPage } from "@/api/currency";
import { cancelOrderTransaction } from "@/api/currency";
import { microtradeLists } from "@/api/assets";
import { democancelOrderTransaction, demotransactionPage } from "@/api/demo";
import UseSystemSetting from "@/commonapi/useSystemSetting";
import Messagebox from "@/components/messageBox/index.vue";
import Pagination from "@/components/pagination/index.vue";
import { reactive } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { ElMessage } from "element-plus";
import Norecord from "@/components/noRecord/NoRecord.vue";
import { accMulti } from "@/utils/calculation";

export default {
  name: "Current",
  components: { Pagination, Messagebox, Norecord },
  setup() {
    const state = reactive({
      list_param: { page: 1, limit: 20 },
      tableData: [],
      currentPage: 1,
      lever_status: 1,
      total: 0,
      closeid: "",
      dialog: false,
    });
    /**
     * methods
     */
    onMounted(() => {
      getList();
    });
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    watch(
      () => virtual_wallet.value,
      () => {
        state.list_param.page = 1;
        getList();
      }
    );
    // 获取列表
    const getList = () => {
      console.log('是我吗')
      let data = { ...state.list_param };
      state.loading = true;
      data.match_id=3
      data.status=1
      // let setFun = virtual_wallet.value ? demotransactionPage : transactionPage;
      let setFun =microtradeLists;
      setFun(data)
        .then((res) => {
          state.loading = false;
          state.tableData = res.data.data;
          state.total = res.data.total;
        })
        .catch(() => {
          state.loading = false;
        });
    };
    // 跳转到新页面
    const currentchange = (val) => {
      state.list_param.page = val;
      getList();
    };
    // 撤单
    const close = (id) => {
      state.dialog = true;
      state.closeid = id;
    };
    const confirm = () => {
      state.dialog = false;
      state.loading = true;
      let setFun = virtual_wallet.value
        ? democancelOrderTransaction
        : cancelOrderTransaction;
      setFun(state.closeid)
        .then((res) => {
          if (res.code === 1) {
            ElMessage({
              type: "success",
              message: res.message,
            });
            state.loading = false;
            state.list_param.page = 1;
            getList();
          }
        })
        .catch(() => {
          state.loading = false;
        });
    };
    return {
      state,
      getList,
      currentchange,
      close,
      confirm,
      accMulti,
    };
  },
};
</script>

<style scoped lang="less">
.jump {
  width: 44px;
  height: 20px;
  line-height: 20px;
  margin-inline-start: 10px;
}
.page {
  width: 20px;
  height: 20px;
}
</style>
